<template>
  <basic-dialog :visible="show"
                minWidth="600px"
                title="选择产线"
                :isFullScreen="false">
    <q-form @submit="submit" class="q-gutter-md dialog-content margin-t-20">
      <q-card-section class="scrollbar scroll-y margin-b-20" style="max-height: 500px;padding-top: 0">
        <div class="factory">
          <div class="title">
            {{factoryName}} - {{plant.label}}
          </div>
          <ul class="plant-list">
            <li class="plant-item" :class="{'active': setLine.id === null}" @click="selectLine({id: null})">
              <div style="margin: 0 auto;width: fit-content">全部</div>
            </li>
            <li class="plant-item" v-for="(item, index) in plant.children" :key="index"
                :class="{'active': setLine.id === item.id}"
                v-show="item.label !== 'default'" @click="selectLine(item)">
              <div style="margin: 0 auto;width: fit-content">{{item.label}}</div>
            </li>
          </ul>
        </div>
      </q-card-section>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="上一步" color="primary" @click="hideDialog" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" type="submit" :loading="submitting"/>
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
export default {
  name: 'set-roduction-line',
  data () {
    return {
      show: false,
      submitting: false, // 提交状态
      setLine: {
        id: null
      },
      factoryName: '',
      plant: {},
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    // 显示弹框
    showDialog (factoryName, plant, line) {
      this.show = true
      this.factoryName = factoryName
      this.plant = plant
      // 非之前选择车间，产线重置为全部
      if (line.id !== null && this.plant.children.find(item => item.id === line.id)) {
        this.setLine = line
      } else {
        this.setLine = {
          id: null
        }
      }
    },
    hideDialog () {
      this.show = false
    },
    selectLine (data) {
      this.setLine = data
    },
    submit () {
      this.$emit('setLine', this.setLine)
      this.hideDialog()
    }
  }
}
</script>

<style scoped lang='stylus'>
  .factory{
    margin-top 10px
    &:first-child{
      margin-top 0
    }
  }
  .title{
    font-size 16px
    font-weight 500
    color #333
    margin-bottom 20px
  }
  .plant-list{
    display flex
    flex-wrap wrap
    margin-right -10px
    .plant-item{
      min-width 124px
      min-height 32px
      word-break break-all
      padding 6px 8px
      line-height 20px
      border:1px dashed #999
      border-radius:6px
      margin-right 10px
      margin-bottom 10px
      cursor pointer
      &.active{
        border-color #5f77fd
        color #5f77fd
      }
    }
  }
</style>
